<template>
	<div class="">
		<el-divider content-position="left">选择题目</el-divider>
		<el-tabs v-model="category.active" @tab-click="onCategoryChange">
			<el-tab-pane v-for="(item, index) in category.list" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
		</el-tabs>
		<el-row :gutter="20">
			<el-col :span="5" style="display: flex; justify-content: flex-end;">
				<el-tabs tab-position="left" v-model="questionbank.active" @tab-click="onQuestionBankChange">
					<el-tab-pane v-for="(item, index) in questionbank.list" :key="index" :label="item.qbName" :name="item.id"></el-tab-pane>
				</el-tabs>
			</el-col>
			<el-col :span="19" style="max-height: 500px; overflow: auto;">
				<el-table :data="question.list" border>
					<el-table-column width="55">
						<template #header>
							<el-checkbox v-model="isSelectAll"></el-checkbox>
						</template>
						<template #default="{row}">
							<el-checkbox :value="questionSelectionIds.includes(row.id)" @change="onQuestionHandleChange(row)"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="title" label="标题"></el-table-column>
					<el-table-column prop="questionType" label="题目类型" width="200"></el-table-column>
				</el-table>

				<div class="pagination">
					<FortressPagination
						:total="question.total"
						:current-page="question.page.current"
						:page-size="question.page.size"
						@refreshData="onQuestionChange"
					></FortressPagination>
				</div>
			</el-col>
		</el-row>
		<el-divider content-position="left">分数设置</el-divider>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-form label-width="100px">
					<el-form-item label="单选题数量: ">
						<div style="display: flex;">
							<el-input :value="singleNumber" style="margin-right: 10px;" disabled></el-input>
							道
						</div>
					</el-form-item>
					<el-form-item label="多选题数量: ">
						<div style="display: flex;">
							<el-input :value="multipleNumber" style="margin-right: 10px;" disabled></el-input>
							道
						</div>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="6">
				<el-form>
					<el-form-item label="每题: ">
						<div style="display: flex; justify-content: flex-start;gap: 10px;">
							<el-input-number :min="0" :step="1" :precision="0" v-model="formData.singleScore"></el-input-number>
							分
						</div>
					</el-form-item>
					<el-form-item label="每题: ">
						<div style="display: flex;justify-content: flex-start;gap: 10px;">
							<el-input-number :min="0" :step="1" :precision="0" v-model="formData.multipleScore"></el-input-number>
							分
						</div>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<div class="tip">当前试卷总分：{{ totalScore }} 分</div>
		<el-checkbox v-model="formData.isOutOrder" :true-label="1" :false-label="2">题目乱序(勾选后，每个人的题目顺序不同)</el-checkbox>
	</div>
</template>

<script>
import request from "@/common/request"
import FortressPagination from "@/components/fortress-pagination.vue"

export default {
	name: "studyexam-step-first",
	props: {
		formData: {},
	},
	data() {
		return {
			category: {
				active: "",
				list: [],
			},
			questionbank: {
				active: "",
				list: [],
			},
			question: {
				selection: [],
				list: [],
				page: {
					current: 1,
					size: 10,
				},
				total: 0,
			},
		}
	},
	computed: {
		questionListIds() {
			return this.question.list.map(item => item.id)
		},
		questionSelectionIds() {
			return this.question.selection.map(item => item.id)
		},

		isSelectAll: {
			get() {
				if (this.questionListIds.length) {
					return this.questionListIds.every(item => this.questionSelectionIds.includes(item))
				}
				return false
			},
			set(value) {
				const other = this.question.selection.filter(item => !this.questionListIds.includes(item.id))
				this.question.selection = [].concat(other, value ? this.question.list : [])
			},
		},

		singleNumber() {
			const length = this.question.selection.filter(item => item.questionType === "单选题").length
			// eslint-disable-next-line vue/no-side-effects-in-computed-properties
			this.formData.singleNum = length
			return length
		},
		multipleNumber() {
			const length = this.question.selection.filter(item => item.questionType === "多选题").length
			// eslint-disable-next-line vue/no-side-effects-in-computed-properties
			this.formData.multipleNum = length
			return length
		},
		totalScore() {
			const total = this.singleNumber * this.formData.singleScore + this.multipleNumber * this.formData.multipleScore
			// eslint-disable-next-line vue/no-side-effects-in-computed-properties
			this.formData.totalScore = total
			return total
		},
	},
	created() {
		this.getCategory()
	},
	methods: {
		onCategoryChange() {
			this.questionbank.list = []
			this.getQuestionBank()
		},
		onQuestionBankChange() {
			this.question.list = []
			this.getQuestion()
		},
		onQuestionHandleChange(row) {
			const index = this.question.selection.findIndex(item => item.id === row.id)
			if (index === -1) {
				this.question.selection.push(row)
			} else {
				this.question.selection.splice(index, 1)
			}
		},

		async getCategory() {
			try {
				const { code, data, msg } = await request("get", "/study/exam/studyQuestionbankType/list")
				if (code === 0) {
					this.category.list = data
					if (data.length) {
						this.category.active = data[0].id
					} else {
						this.category.active = ""
						// throw new Error("请先创建题库分类")
						return
					}
					this.getQuestionBank()
				} else {
					throw new Error(msg)
				}
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		async getQuestionBank() {
			this.questionbank.list = []
			this.question.list = []
			this.question.total = 0
			this.question.page.current = 1
			try {
				const { code, data, msg } = await request("get", "/study/exam/studyQuestionbank/list", {
					qbtypeId: this.category.active,
				})
				if (code === 0) {
					this.questionbank.list = data
					if (data.length) {
						this.questionbank.active = data[0].id
					} else {
						this.questionbank.active = ""
						// throw new Error("请先创建题库")
						return
					}
					this.onQuestionChange({
						current: 1,
						size: this.question.page.size,
					})
				} else {
					throw new Error(msg)
				}
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		async getQuestion() {
			this.question.list = []
			try {
				const { code, data, msg } = await request("get", "/study/exam/studyQuestion/page", {
					qbId: this.questionbank.active,
					...this.question.page,
				})
				if (code === 0) {
					this.question.list = data.records
					this.question.total = data.total
				} else {
					throw new Error(msg)
				}
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		onQuestionChange({ current, size }) {
			this.question.page.current = current
			this.question.page.size = size
			this.getQuestion()
		},
	},
	components: {
		FortressPagination,
	},
}
</script>

<style lang="scss" scoped>
.tip {
	color: red;
	font-size: 14px;
	line-height: 3;
}

.pagination {
	padding-block: 10px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
</style>
